<!DOCTYPE html>
<html lang="zh-cn" itemscope itemtype="http://schema.org/WebPage">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Shortcodes Preview - Tonser&#39;s blog</title>
  

<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta name="MobileOptimized" content="width"/>
<meta name="HandheldFriendly" content="true"/>


<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">

<meta name="mobile-web-app-capable" content="yes">

<meta name="author" content="Tonser" />
  <meta name="description" content="What a Shortcode is Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Often, content authors are forced to add raw HTML (e.g., video &amp;lt;iframes&amp;gt;) to Markdown content. We think this contradicts the beautiful simplicity of Markdown&amp;rsquo;s syntax.
Hugo created shortcodes to circumvent these limitations.
A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template. Note that shortcodes will not work in template files. If you need the type of drop-in functionality that shortcodes provide but in a template, you most likely want a [partial template][partials] instead.
In addition to cleaner Markdown, shortcodes can be updated any time to reflect new classes, techniques, or standards. At the point of site generation, Hugo shortcodes will easily merge in your changes. You avoid a possibly complicated search and replace operation.
More details: https://gohugo.io/content-management/shortcodes/

" />

  <meta name="keywords" content="Tonser, blog, jane" />






<meta name="generator" content="Hugo 0.47.1" />


<link rel="canonical" href="https://sundxfansky.github.io/post/shortcodes-preview/" />



<link rel="icon" href="/favicon.ico" />










<link href="/dist/jane.min.css?v=2.7.0" rel="stylesheet">




<meta property="og:title" content="Shortcodes Preview" />
<meta property="og:description" content="What a Shortcode is

Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Often, content authors are forced to add raw HTML (e.g., video &lt;iframes&gt;) to Markdown content. We think this contradicts the beautiful simplicity of Markdown&rsquo;s syntax.

Hugo created shortcodes to circumvent these limitations.

A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template. Note that shortcodes will not work in template files. If you need the type of drop-in functionality that shortcodes provide but in a template, you most likely want a [partial template][partials] instead.

In addition to cleaner Markdown, shortcodes can be updated any time to reflect new classes, techniques, or standards. At the point of site generation, Hugo shortcodes will easily merge in your changes. You avoid a possibly complicated search and replace operation.

More details: https://gohugo.io/content-management/shortcodes/

" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://sundxfansky.github.io/post/shortcodes-preview/" /><meta property="article:published_time" content="2018-03-04T16:01:23&#43;08:00"/>
<meta property="article:modified_time" content="2018-03-05T16:01:23&#43;08:00"/>
<meta itemprop="name" content="Shortcodes Preview">
<meta itemprop="description" content="What a Shortcode is

Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Often, content authors are forced to add raw HTML (e.g., video &lt;iframes&gt;) to Markdown content. We think this contradicts the beautiful simplicity of Markdown&rsquo;s syntax.

Hugo created shortcodes to circumvent these limitations.

A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template. Note that shortcodes will not work in template files. If you need the type of drop-in functionality that shortcodes provide but in a template, you most likely want a [partial template][partials] instead.

In addition to cleaner Markdown, shortcodes can be updated any time to reflect new classes, techniques, or standards. At the point of site generation, Hugo shortcodes will easily merge in your changes. You avoid a possibly complicated search and replace operation.

More details: https://gohugo.io/content-management/shortcodes/

">


<meta itemprop="datePublished" content="2018-03-04T16:01:23&#43;08:00" />
<meta itemprop="dateModified" content="2018-03-04T16:01:23&#43;08:00" />
<meta itemprop="wordCount" content="343">



<meta itemprop="keywords" content="preview,shortcodes,tag-6," />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Shortcodes Preview"/>
<meta name="twitter:description" content="What a Shortcode is

Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Often, content authors are forced to add raw HTML (e.g., video &lt;iframes&gt;) to Markdown content. We think this contradicts the beautiful simplicity of Markdown&rsquo;s syntax.

Hugo created shortcodes to circumvent these limitations.

A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template. Note that shortcodes will not work in template files. If you need the type of drop-in functionality that shortcodes provide but in a template, you most likely want a [partial template][partials] instead.

In addition to cleaner Markdown, shortcodes can be updated any time to reflect new classes, techniques, or standards. At the point of site generation, Hugo shortcodes will easily merge in your changes. You avoid a possibly complicated search and replace operation.

More details: https://gohugo.io/content-management/shortcodes/

"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->




</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/" class="logo">细嗅蔷薇</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/">主页</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/post/">文章</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/tags/">标签</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/categories/">分类</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/about/">关于</a>
          
        
      </li>
    
  </ul>
</nav>


  
    






  <link rel="stylesheet" href="/lib/photoswipe/photoswipe.min.css" />
  <link rel="stylesheet" href="/lib/photoswipe/default-skin/default-skin.min.css" />




<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

<div class="pswp__bg"></div>

<div class="pswp__scroll-wrap">
    
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    
    <div class="pswp__ui pswp__ui--hidden">
    <div class="pswp__top-bar">
      
      <div class="pswp__counter"></div>
      <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
      <button class="pswp__button pswp__button--share" title="Share"></button>
      <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
      <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
      
      
      <div class="pswp__preloader">
        <div class="pswp__preloader__icn">
          <div class="pswp__preloader__cut">
            <div class="pswp__preloader__donut"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
      <div class="pswp__share-tooltip"></div>
    </div>
    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
    </button>
    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
    </button>
    <div class="pswp__caption">
      <div class="pswp__caption__center"></div>
    </div>
    </div>
    </div>
</div>

  

  

  <header id="header" class="header container">
    <div class="logo-wrapper">
  <a href="/" class="logo">
    
      细嗅蔷薇
    
  </a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    
      <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/">主页</a>
          

        

      </li>
    
      <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/post/">文章</a>
          

        

      </li>
    
      <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/tags/">标签</a>
          

        

      </li>
    
      <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/categories/">分类</a>
          

        

      </li>
    
      <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/about/">关于</a>
          

        

      </li>
    
    
  </ul>
</nav>

  </header>

  <div id="mobile-panel">
    <main id="main" class="main bg-llight">
      <div class="content-wrapper">
        <div id="content" class="content container">
          <article class="post bg-white">
    
    <header class="post-header">
      <h1 class="post-title">Shortcodes Preview</h1>
      
      <div class="post-meta">
        <span class="post-time"> 2018-03-04 </span>
        <div class="post-category">
            <a href="https://sundxfansky.github.io/categories/docs/"> docs </a>
            <a href="https://sundxfansky.github.io/categories/shortcodes/"> shortcodes </a>
            <a href="https://sundxfansky.github.io/categories/index/"> index </a>
            
          </div>
        <span class="more-meta"> 约 343 字 </span>
          <span class="more-meta"> 预计阅读 2 分钟 </span>

        
        
          <span id="busuanzi_container_page_pv">
            | 阅读 <span id="busuanzi_value_page_pv"></span>
          </span>
        

        
        
      </div>
    </header>

    
    
<div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">文章目录</h2>
  <div class="post-toc-content">
    <nav id="TableOfContents">
<ul>
<li>
<ul>
<li><a href="#what-a-shortcode-is">What a Shortcode is</a></li>
<li><a href="#blockquotes">blockquotes</a></li>
<li><a href="#music">music</a></li>
<li><a href="#gist">gist</a></li>
<li><a href="#youtube">youtube</a></li>
<li><a href="#vimeo">vimeo</a></li>
<li><a href="#youku">youku</a></li>
</ul></li>
</ul>
</nav>
  </div>
</div>

    
    <div class="post-content">
      <h2 id="what-a-shortcode-is">What a Shortcode is</h2>

<p>Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Often, content authors are forced to add raw HTML (e.g., video <code>&lt;iframes&gt;</code>) to Markdown content. We think this contradicts the beautiful simplicity of Markdown&rsquo;s syntax.</p>

<p>Hugo created <strong>shortcodes</strong> to circumvent these limitations.</p>

<p>A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template. Note that shortcodes will not work in template files. If you need the type of drop-in functionality that shortcodes provide but in a template, you most likely want a [partial template][partials] instead.</p>

<p>In addition to cleaner Markdown, shortcodes can be updated any time to reflect new classes, techniques, or standards. At the point of site generation, Hugo shortcodes will easily merge in your changes. You avoid a possibly complicated search and replace operation.</p>

<p>More details: <a href="https://gohugo.io/content-management/shortcodes/">https://gohugo.io/content-management/shortcodes/</a></p>

<p></p>

<h2 id="blockquotes">blockquotes</h2>

<p>Normal quote:











  





  


<blockquote>
  <p>This is a simple quote.</p>
  <footer>
    <strong></strong>
    
      
        
      
    
  </footer>
</blockquote>
</p>

<p>Quote with author:











  
  
  
  





  


<blockquote>
  <p>This is a quote with only an Author named Author2.</p>
  <footer>
    <strong>Author2</strong>
    
      
        
      
    
  </footer>
</blockquote>
</p>

<p>Quote with author and source:











  
  
  
  





  


<blockquote>
  <p>This is a quote from Author3 and source &ldquo;source.&rdquo;</p>
  <footer>
    <strong>Author3</strong>
    
      <cite>Source</cite>
    
  </footer>
</blockquote>
</p>

<p>Quote with author and link:











  
  
  
  





      
      
      
    
     
      
    
    

    
    
  


<blockquote>
  <p>This is a quote from Author4 and links to <a href="https://www.google.com">https://www.google.com</a>.</p>
  <footer>
    <strong>Author4</strong>
    
      
        <cite>
          <a href="https://www.google.com" title="https://www.google.com">google.com</a> 
        </cite>
      
    
  </footer>
</blockquote>
</p>

<p>Quote with author, link and title:











  
  
  
  





  


<blockquote>
  <p>This is a quote from Author5 and links to <a href="https://www.google.com">https://www.google.com</a> with title &ldquo;Google.&rdquo;</p>
  <footer>
    <strong>Author5</strong>
    
      
        <cite>
          <a href="https://www.google.com" title="https://www.google.com">Google</a> 
        </cite>
      
    
  </footer>
</blockquote>
</p>

<p>Quote with author and a link longer than 32 characters, string is first cut at 32 characters then everything after the last forward slash is removed











  
  
  
  





      
      
      
    
     
      
    
    

    
    
         
         
         

         
        
        
        
        
      
      
    
  


<blockquote>
  <p>This is a quote from Author5 and links to <a href="https://twitter.com/CryptoGangsta/status/716427930126196737">https://twitter.com/CryptoGangsta/status/716427930126196737</a> which is longer than 32 characters.
  <br>And this is a new line in the quote with the HTML br tag.</p>
  <footer>
    <strong>Author6</strong>
    
      
        <cite>
          <a href="https://twitter.com/CryptoGangsta/status/716427930126196737" title="https://twitter.com/CryptoGangsta/status/716427930126196737">twitter.com/CryptoGangsta/...</a> 
        </cite>
      
    
  </footer>
</blockquote>
</p>

<p>Test from the Octopress blockquote page at: <a href="http://octopress.org/docs/plugins/blockquote/">http://octopress.org/docs/plugins/blockquote/</a>











  
  
  
  





      
      
      
    
     
      
    
    

    
    
         
         
         

         
        
        
        
        
        
        
      
      
    
  


<blockquote>
  <p>Over the past 24 hours I&rsquo;ve been reflecting on my life &amp; I&rsquo;ve realized only one thing. I need a medieval battle axe.</p>
  <footer>
    <strong>@allanbranch</strong>
    
      
        <cite>
          <a href="https://twitter.com/allanbranch/status/90766146063712256" title="https://twitter.com/allanbranch/status/90766146063712256">twitter.com/allanbranch/status/...</a> 
        </cite>
      
    
  </footer>
</blockquote>
</p>

<h2 id="music">music</h2>

  <iframe style="max-width: 100%"
      class="music163"
      frameborder="no"
      border="0"
      marginwidth="0"
      marginheight="0"
      width="330"
      height="86"
      src="//music.163.com/outchain/player?type=2&id=3950552&auto=0&height=66">
    </iframe>

<h2 id="gist">gist</h2>

<p>We can embed the gist in our content via username and gist ID pulled from the URL:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{&lt; gist spf13 7896402 &gt;}}</pre></td></tr></table>
</div>
</div>
<p>Display:</p>

<script type="application/javascript" src="//gist.github.com/spf13/7896402.js"></script>

<h2 id="youtube">youtube</h2>


<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="//www.youtube.com/embed/w7Ft2ymGmfc" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
</div>


<h2 id="vimeo">vimeo</h2>


<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="//player.vimeo.com/video/146022717" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 </div>


<h2 id="youku">youku</h2>



<div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
    <iframe src="https://player.youku.com/embed/XMzQ0ODUxMjM2NA?autoplay=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen frameborder="0" title="YouKu Video">
    </iframe>
</div>
    </div>

    
    
<div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">文章作者</span>
    <span class="item-content">Tonser</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">上次更新</span>
    <span class="item-content">2018-03-05</span>
  </p>
  
  <p class="copyright-item">
    <span class="item-title">许可协议</span>
    <span class="item-content"><a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a></span>
  </p>
</div>

    
    

    <footer class="post-footer">
      <div class="post-tags">
          <a href="https://sundxfansky.github.io/tags/preview/">preview</a>
          <a href="https://sundxfansky.github.io/tags/shortcodes/">shortcodes</a>
          <a href="https://sundxfansky.github.io/tags/tag-6/">tag-6</a>
          
        </div>

      
      <nav class="post-nav">
        
          <a class="prev" href="/post/jane-theme-preview/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">Jane 主题预览</span>
            <span class="prev-text nav-mobile">上一篇</span>
          </a>
        
          <a class="next" href="/post/image-preview/">
            <span class="next-text nav-default">Image Preview</span>
            <span class="prev-text nav-mobile">下一篇</span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>

  
  

  
  
    <div class="post bg-white">
      <script src="https://utteranc.es/client.js"
            repo= "sundxfansky/comments_blog"
            issue-term="pathname"
            crossorigin="anonymous"
            async>
      </script>
    </div>
  

  

  

  

        </div>
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:sundxfansky@sjtu.edu.cn" rel="me noopener" class="iconfont icon-email"
        title="email" target="_blank">
      </a>
      <a href="https://github.com/sundxfansky" rel="me noopener" class="iconfont icon-github"
        title="github" target="_blank">
      </a>
  <a href="https://sundxfansky.github.io/index.xml" rel="noopener alternate" type="application/rss&#43;xml" class="iconfont icon-rss"
    title="rss" target="_blank">
  </a>
  </div>

<div class="copyright">
  <span class="power-by">
    Powered by <a class="hexo-link" href="https://gohugo.io">Hugo</a>
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    Theme - <a class="theme-link" href="https://github.com/xianmin/hugo-theme-jane">Jane</a>
  </span>

  <span class="copyright-year">
    &copy;
    
      2017 -
    2018
    <span class="heart">
      <i class="iconfont icon-heart"></i>
    </span><span class="author">
        Tonser
        
      </span></span>

  
  
    <span id="busuanzi_container">
      访客数/访问量：<span id="busuanzi_value_site_uv"></span>/<span id="busuanzi_value_site_pv"></span>
    </span>
  
</div>

    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  
<script type="text/javascript" src="/lib/jquery/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="/lib/slideout/slideout-1.0.1.min.js"></script>
<script type="text/javascript" src="/dist/jane.min.js?v=2.7.0"></script>





  
    <script type="text/javascript" src="/js/load-photoswipe.js"></script>
    <script type="text/javascript" src="/lib/photoswipe/photoswipe.min.js"></script>
    <script type="text/javascript" src="/lib/photoswipe/photoswipe-ui-default.min.js"></script>
  




  <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>








</body>
</html>
